import { forwardRef } from "react";
import { Badge } from "@components/ui/badge";
import { cn } from "src/core/utils/components";

type InsightsBadgeType = "elite" | "high" | "fair" | "need-focus";
type InsightsBadgeProps = { type: InsightsBadgeType; className?: string };

const classNames: Record<InsightsBadgeType, string> = {
    "fair": "text-[hsl(42,95%,61%)]",
    "high": "text-[hsl(211,100%,56%)]",
    "elite": "text-[hsl(151,77%,43%)]",
    "need-focus": "text-[hsl(0,84%,62%)]",
};

const names: Record<InsightsBadgeType, string> = {
    "high": "High",
    "need-focus": "Need focus",
    "elite": "Elite",
    "fair": "Fair",
};

const icons: Record<InsightsBadgeType, React.ReactNode> = {
    "elite": (
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 13 13"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M2.19326 3.14274L4.2543 4.95624L6.09055 2.69533C6.14197 2.63212 6.20699 2.58133 6.28076 2.54673C6.35453 2.51214 6.43515 2.49463 6.51663 2.49552C6.5981 2.4964 6.67833 2.51565 6.75133 2.55184C6.82433 2.58803 6.88823 2.64023 6.93826 2.70454L8.69055 4.9557L10.8182 3.1162C10.9018 3.04411 11.0054 2.99926 11.1151 2.98766C11.2248 2.97605 11.3355 2.99824 11.4323 3.05126C11.5291 3.10427 11.6074 3.18559 11.6567 3.28432C11.706 3.38305 11.7239 3.49448 11.7082 3.6037L10.8957 9.20833H2.12447L1.29951 3.62916C1.28312 3.51933 1.30089 3.40712 1.3504 3.30772C1.39991 3.20832 1.47878 3.12654 1.57631 3.07346C1.67385 3.02038 1.78534 2.99855 1.8957 3.01095C2.00605 3.02334 2.10993 3.06935 2.19326 3.14274ZM2.16672 9.75H10.8334V10.2917C10.8334 10.4353 10.7763 10.5731 10.6747 10.6747C10.5732 10.7763 10.4354 10.8333 10.2917 10.8333H2.70839C2.56473 10.8333 2.42695 10.7763 2.32537 10.6747C2.22379 10.5731 2.16672 10.4353 2.16672 10.2917V9.75Z"
                fill="#19C26F"
            />
        </svg>
    ),
    "need-focus": (
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 12 13"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M6.5 1L6.5005 2.531C7.38161 2.6424 8.20063 3.04372 8.82858 3.67176C9.45653 4.2998 9.85773 5.11888 9.969 6H11.5V7L9.969 7.0005C9.85763 7.88153 9.45638 8.7005 8.82844 9.32844C8.2005 9.95638 7.38153 10.3576 6.5005 10.469L6.5 12H5.5V10.469C4.61888 10.3577 3.7998 9.95653 3.17176 9.32858C2.54372 8.70063 2.1424 7.88161 2.031 7.0005L0.5 7V6H2.031C2.14229 5.1188 2.54357 4.29967 3.17162 3.67162C3.79967 3.04357 4.6188 2.64229 5.5 2.531V1H6.5ZM6 3.5C5.20435 3.5 4.44129 3.81607 3.87868 4.37868C3.31607 4.94129 3 5.70435 3 6.5C3 7.29565 3.31607 8.05871 3.87868 8.62132C4.44129 9.18393 5.20435 9.5 6 9.5C6.79565 9.5 7.55871 9.18393 8.12132 8.62132C8.68393 8.05871 9 7.29565 9 6.5C9 5.70435 8.68393 4.94129 8.12132 4.37868C7.55871 3.81607 6.79565 3.5 6 3.5ZM6 5.5C6.26522 5.5 6.51957 5.60536 6.70711 5.79289C6.89464 5.98043 7 6.23478 7 6.5C7 6.76522 6.89464 7.01957 6.70711 7.20711C6.51957 7.39464 6.26522 7.5 6 7.5C5.73478 7.5 5.48043 7.39464 5.29289 7.20711C5.10536 7.01957 5 6.76522 5 6.5C5 6.23478 5.10536 5.98043 5.29289 5.79289C5.48043 5.60536 5.73478 5.5 6 5.5Z"
                fill="#EF4C4B"
            />
        </svg>
    ),
    "fair": (
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M6.64946 1.07401L10.9665 8.551C11.0323 8.66502 11.0669 8.79435 11.0669 8.926C11.0669 9.05765 11.0323 9.18698 10.9665 9.301C10.9006 9.41501 10.806 9.50969 10.692 9.57552C10.5779 9.64134 10.4486 9.676 10.317 9.676H1.68296C1.55131 9.676 1.42198 9.64134 1.30797 9.57552C1.19396 9.50969 1.09928 9.41501 1.03346 9.301C0.967636 9.18698 0.932983 9.05765 0.932983 8.926C0.932984 8.79435 0.967639 8.66502 1.03346 8.551L5.35046 1.07401C5.63897 0.574005 6.36046 0.574005 6.64946 1.07401ZM5.99996 7.00001C5.86736 7.00001 5.74018 7.05268 5.64641 7.14645C5.55264 7.24022 5.49996 7.3674 5.49996 7.50001C5.49996 7.63261 5.55264 7.75979 5.64641 7.85356C5.74018 7.94733 5.86736 8.00001 5.99996 8.00001C6.13257 8.00001 6.25975 7.94733 6.35352 7.85356C6.44729 7.75979 6.49996 7.63261 6.49996 7.50001C6.49996 7.3674 6.44729 7.24022 6.35352 7.14645C6.25975 7.05268 6.13257 7.00001 5.99996 7.00001ZM5.99996 3.50001C5.8775 3.50002 5.7593 3.54498 5.66778 3.62636C5.57626 3.70774 5.51779 3.81988 5.50346 3.94151L5.49996 4.00001V6.00001C5.50011 6.12745 5.5489 6.25002 5.63639 6.34269C5.72387 6.43536 5.84344 6.49112 5.97066 6.49859C6.09788 6.50606 6.22315 6.46467 6.32088 6.38287C6.41861 6.30108 6.48141 6.18505 6.49646 6.05851L6.49996 6.00001V4.00001C6.49996 3.8674 6.44729 3.74022 6.35352 3.64645C6.25975 3.55268 6.13257 3.50001 5.99996 3.50001Z"
                fill="#FAC33F"
            />
        </svg>
    ),
    "high": (
        <svg
            width="100%"
            height="100%"
            viewBox="0 0 13 13"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M8.12503 9.9125C7.88128 9.9125 7.71878 9.83125 7.47503 9.75L6.50003 9.34375L5.52503 9.75C5.36253 9.83125 5.11878 9.9125 4.87503 9.9125C4.71253 9.9125 4.63128 9.9125 4.46878 9.83125L4.06253 13L6.50003 11.375L8.93753 13L8.45003 9.83125C8.36878 9.9125 8.20628 9.9125 8.12503 9.9125ZM10.4813 4.79375C10.4 4.63125 10.4 4.3875 10.4813 4.225L10.9688 3.25C11.1313 2.925 10.9688 2.51875 10.5625 2.35625L9.50628 1.95C9.34378 1.86875 9.18128 1.70625 9.10003 1.54375L8.69378 0.4875C8.61253 0.1625 8.36878 0 8.12503 0C8.04378 0 7.88128 0 7.80003 0.08125L6.74378 0.56875H6.50003C6.41878 0.56875 6.33753 0.56875 6.25628 0.4875L5.20003 0.08125C5.11878 0 4.95628 0 4.87503 0C4.63128 0 4.38753 0.1625 4.22503 0.40625L3.81878 1.54375C3.81878 1.70625 3.65628 1.86875 3.49378 1.95L2.35628 2.35625C2.03128 2.4375 1.86878 2.84375 2.03128 3.25L2.51878 4.30625C2.60003 4.46875 2.60003 4.7125 2.51878 4.875L2.03128 5.85C1.86878 6.175 2.03128 6.58125 2.43753 6.74375L3.49378 7.15C3.65628 7.23125 3.81878 7.39375 3.90003 7.55625L4.30628 8.6125C4.38753 8.9375 4.63128 9.1 4.87503 9.1C4.95628 9.1 5.03753 9.1 5.11878 9.01875L6.17503 8.53125C6.25628 8.53125 6.33753 8.45 6.41878 8.45C6.50003 8.45 6.58128 8.45 6.66253 8.53125L7.71878 9.01875C7.80003 9.1 7.88128 9.1 7.96253 9.1C8.20628 9.1 8.45003 8.9375 8.61253 8.69375L9.01878 7.6375C9.10003 7.475 9.26253 7.3125 9.42503 7.23125L10.4813 6.825C10.8063 6.6625 11.05 6.25625 10.8875 5.93125L10.4813 4.79375ZM6.50003 7.8C4.71253 7.8 3.25003 6.3375 3.25003 4.55C3.25003 2.7625 4.71253 1.3 6.50003 1.3C8.28753 1.3 9.75003 2.7625 9.75003 4.55C9.75003 6.3375 8.28753 7.8 6.50003 7.8Z"
                fill="#1E8AFF"
            />
            <path
                d="M8.9375 4.54999C8.9375 5.19645 8.68069 5.81644 8.22357 6.27356C7.76645 6.73068 7.14647 6.98749 6.5 6.98749C5.85353 6.98749 5.23355 6.73068 4.77643 6.27356C4.31931 5.81644 4.0625 5.19645 4.0625 4.54999C4.0625 3.90352 4.31931 3.28354 4.77643 2.82642C5.23355 2.3693 5.85353 2.11249 6.5 2.11249C7.14647 2.11249 7.76645 2.3693 8.22357 2.82642C8.68069 3.28354 8.9375 3.90352 8.9375 4.54999Z"
                fill="#1E8AFF"
            />
        </svg>
    ),
};

export const InsightsBadge = forwardRef<any, InsightsBadgeProps>(
    (props, ref) => {
        return (
            <Badge
                ref={ref}
                variant="secondary"
                leftIcon={icons[props.type]}
                className={cn(
                    "h-fit gap-1.5",
                    props.className,
                    classNames[props.type],
                )}>
                {names[props.type]}
            </Badge>
        );
    },
);
